<template>
    <div id="scroll" class="scroll">
        <canvas class='webgl' id="canvas"></canvas>
        <section class='section' >
          <h1>番茄小萌,在一个色彩斑斓的番茄之国里，每个番茄都是一个充满生命力的个体。番茄小萌是这个国度里最年轻、最调皮捣蛋的小番茄，总是充满好奇心地四处探索。她的头上有一片翠绿的叶子，犹如一顶可爱的帽子，常常因为各种好奇的事情将它弄得歪歪扭扭。
            她和她的番茄伙伴们一起，以友情、勇气和创新的精神，共同经历了一系列有趣的冒险。</h1>
        </section>
        <section class='section_odd '>
          <h2>在豆奇乐园中，土豆被赋予了人格化的形象，成为了一群爱好冒险和探索的可爱小豆豆。
每一个土豆角色都有着独特的特点和个性，他们以勇敢、乐观和友善为标志，带给游客们无尽的欢笑和愉悦。
无论是喜欢冒险的探险豆，还是充满创意的艺术豆，或是热爱音乐的音乐豆，每一个角色都代表了土豆的不同魅力和文化。
除了可爱的角色形象，豆奇乐园也充满了丰富多样的文化体验。
你可以参加与土豆有关的各种创意工坊和主题展览，感受生活中无处不在的土豆魅力。
还可以品尝制作精致的土豆美食，如脆皮炸土豆球和浓郁香滑的土豆泥，让味蕾尽情享受土豆的美味。</h2>
        </section>
        <section class='section'>
          <h1>3Contact Me</h1>
        </section>
        <section class='section'>
          <h1>4Contact Me</h1>
        </section>
        <section class='section'>
          <h1>5Contact Me</h1>
        </section>
        <section class='section'>
          <h1>6Contact Me</h1>
        </section>
        <section class='section'>
          <h1>7Contact Me</h1>
        </section>
        
      </div>
</template>

<script>
import * as THREE from "three";
//import gradientImage from './images/5.jpg';
import gsap from 'gsap';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'

export default {
    data(){
        return{
            firobj:{}
        }
    },
    methods:{
        init(){
            const sizes = {
      width: window.innerWidth,
      height: window.innerHeight
    }
    const canvas = document.body.querySelector('#canvas');
    const renderer = new THREE.WebGLRenderer({
   canvas: canvas,
      alpha: true
    });
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    const scene = new THREE.Scene();

    // 光源
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1, 1, 0)
    scene.add(directionalLight);

    // 相机
    // 相机组
    const cameraGroup = new THREE.Group();
    scene.add(cameraGroup);
    // 基础相机
    const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
    camera.position.set(0, 0, 6);
    cameraGroup.add(camera);
  // 缩放监听
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  }, false);

  //滚动监听
  let scrollY = window.scrollY;
  let currentSection = 0;
  window.addEventListener('scroll', () => {
    scrollY = window.scrollY;
    const newSection = Math.round(scrollY / window.innerHeight);
    
    if (newSection !== currentSection) {
      currentSection = newSection;
      gsap.to(sectionMeshes[currentSection].rotation, {
        duration: 1.5,
        ease: 'power2.inOut',
        x: '+=4',
        y: '+=2',
        z: '+=1.5'
      })
    }
  }, false);

  const ambientLight = new THREE.AmbientLight(0xdddddd);
  scene.add(ambientLight);

  // 贴图
  const textureLoader = new THREE.TextureLoader();
  const gradientTexture = textureLoader.load('/models/images/5.jpg');
  
  //网格立方体
  const objectDistance = 4;

let sectionMeshes = []
//第一个模型: 冰淇淋
new GLTFLoader().load('files/gltf/yuan_xihongshi.glb', mesh => {
  var player = mesh.scene;
  player.position.x = 2;
  player.position.y = - objectDistance * 0; 
  player.scale.set(.3,.3,.3);
  scene.add(player);
sectionMeshes.push(player)
});
//第二个模型:土豆瓜
new GLTFLoader().load('files/gltf/yuan_potato.glb', mesh => {
  var player = mesh.scene;
  player.position.x = -2;
  player.position.y = - objectDistance * 1; 
  player.scale.set(1.4,1.4,1.4);
  scene.add(player);
 sectionMeshes.push(player)
});
//第三个模型:
new GLTFLoader().load('files/gltf/yuan_house.glb', mesh => {
  var player = mesh.scene;
  player.position.x = 2;
  player.position.y = - objectDistance * 2; 
  player.scale.set(3.5,3.5,3.5);
  scene.add(player);
 sectionMeshes.push(player)
});
//第四个模型:
new GLTFLoader().load('files/gltf/yuan_kugua.glb', mesh => {
  var player = mesh.scene;
  player.position.x = -2;
  player.position.y = - objectDistance * 3; 
  player.scale.set(.2,.2,.2);
  scene.add(player);
 sectionMeshes.push(player)
});
//第五个模型:
new GLTFLoader().load('files/gltf/yuan_minecraft.glb', mesh => {
  var player = mesh.scene;
  player.position.x = 2;
  player.position.y = - objectDistance * 4; 
  player.scale.set(1,1,1);
  scene.add(player);    
 sectionMeshes.push(player)
});
//第六个模型:
new GLTFLoader().load('files/gltf/yuan_pear.glb', mesh => {
  var player = mesh.scene;
  player.position.x = -2;
  player.position.y = - objectDistance * 5; 
  player.scale.set(.4,.4,.4);
  scene.add(player);
 sectionMeshes.push(player)
});

//第七个模型:
new GLTFLoader().load('files/gltf/yuan_ice.glb', mesh => {
  var player = mesh.scene;
  player.position.x = 2;
  player.position.y = - objectDistance * 6; 
  player.scale.set(1,1,1);
  scene.add(player);
 sectionMeshes.push(player)
});
  //粒子
  const particlesCount = 200;
  const positions = new Float32Array(particlesCount * 3);
  for (let i=0; i<particlesCount; i++) {
    positions[i * 3 + 0] = (Math.random() - .5) * 10;
   positions[i * 3 + 1] = objectDistance * .5 - Math.random() * objectDistance * sectionMeshes.length;
    positions[i * 3 +2] = (Math.random() - .5) * 10;    
  }
  const particlesGeometry = new THREE.BufferGeometry();
  particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  const particlesMaterial = new THREE.PointsMaterial({
    color: '#f5f5f5',
    sizeAttenuation: textureLoader,
    size: .03
  });
  const particles = new THREE.Points(particlesGeometry, particlesMaterial);
  scene.add(particles);

  //鼠标
  const cursor = {}
  cursor.x = 0
  cursor.y = 0
  // 鼠标移动监听
  window.addEventListener('mousemove', event => {
    cursor.x = event.clientX / window.innerWidth - .5;
    cursor.y = -(event.clientY / window.innerHeight- .5);
  });

  const clock = new THREE.Clock();
  let previousTime = 0;
  function animate(){
    const elapsedTime = clock.getElapsedTime();
    const deltaTime = elapsedTime - previousTime;
    previousTime = elapsedTime;
    // 相机动画
    camera.position.y = -scrollY /window.innerHeight * objectDistance;
    const parallaxX = cursor.x * .5;
    const parallaxY = cursor.y * .5;
    cameraGroup.position.x += (parallaxX - cameraGroup.position.x) * 5 * deltaTime;
    cameraGroup.position.y += (parallaxY - cameraGroup.position.y) * 5 * deltaTime;
    // 模型动画
    for (const mesh of sectionMeshes) {
      mesh.rotation.x += deltaTime * .1
      mesh.rotation.z += deltaTime * .12
    }
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
  animate();     
        
    
        }
    },
    mounted(){
        this.init()
    }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}

.scroll
 {background :#212121 !important;
  margin: 0;
    padding: 0;}

.webgl
  {position: fixed;
  top :0;
  left: 0;
  outline: none;
  z-index: 2}
.section
  {display :flex;
  align-items :center;
  height :100vh;
  width: 800px;
  position :relative;
  color: #ffeded;
  text-transform :uppercase;
  font-size: 7vmin !important;
  padding-left: 10%;
  padding-right: 10%;
  background-size: contain;
 
}
.section_odd
    {
        display :flex;
  align-items :center;
  height :100vh;
  width: 800px;
  position :relative;
  left: 700px;

  color: #ffeded;
  text-transform :uppercase;
  font-size: 7vmin !important;
  padding-left: 0%;
  padding-right: 10%;
  background-size: contain;
        }
</style>